<template>
    <div class="system-role-container-school-index">
        <el-card shadow="hover" class="mb10  ">
            <div class="system-user-search-school-index">
                <div>
                    <el-form :model="paramSearch" label-width="150px">

                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="省市名称：">
                                <el-select v-model="tableData.param.region" filterable placeholder="请选择省市名称" size="small" style="width: 180px" class="ml10">
                                    <el-option v-for="(item,index) in regionList" :key="index" :label="item.name"
                                        :value="item.code"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="学校名称：">
                                <el-input size="small" placeholder="请输入学校名称" v-model="tableData.param.name"
                                    style="max-width: 180px" class="ml10">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                            <el-form-item label="学历层次：">
                                <el-select v-model="tableData.param.xlcc" placeholder="请选择学历类别" size="small"
                                    style="width: 180px" class="ml10">
                                    <el-option label="研究生" value="1"></el-option>
                                    <el-option label="普通本科" value="2"></el-option>
                                    <el-option label="普通专科" value="3"></el-option>
                                    <el-option label="成人本科" value="4"></el-option>
                                    <el-option label="成人专科" value="5"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </div>
                <div style="display: flex;justify-content: end;">
                    <el-button class="ml10" @click="Reset">重置 </el-button>
                    <el-button class="ml10 btn_bgc" type="primary" @click="search"> 查询</el-button>

                </div>
            </div>
        </el-card>

        <el-card shadow="hover">
          <template #header>
            <div style="display: flex; justify-content: end">
              <el-upload
                  class="ml10 upload-demo"
                  action="#"
                  accept="xlsx,xls"
                  multiple
                  :limit="20"
                  :before-upload="beforeUpload"
              >
                <el-button style="margin: 10px 0; transform: translateX(2px);" class="ml10 btn_bgc" type="primary">导入</el-button>

              </el-upload>
            </div>

          </template>
          <el-table :data="tableData.data" style="width: 100%" :header-cell-style="{ background: '#EEEEEE', }">
            <el-table-column prop="region" label="省市名称" align="center"></el-table-column>
            <el-table-column prop="name" label="学校名称" align="center"></el-table-column>
            <el-table-column prop="code" label="学校代码" align="center"></el-table-column>
            <el-table-column prop="xlcc" label="学校层次" align="center">
              <template #default="scope">
                <span type="success" v-if="scope.row.xlcc === 1">研究生</span>
                <span type="success" v-if="scope.row.xlcc === 2">普通本科</span>
                <span type="success" v-if="scope.row.xlcc === 3">普通专科</span>
                <span type="success" v-if="scope.row.xlcc === 4">成人本科</span>
                <span type="success" v-if="scope.row.xlcc === 5">成人专科</span>
              </template>
            </el-table-column>
            <el-table-column prop="applyTime" label="申请时间" align="center"></el-table-column>
            <el-table-column prop="status" label="状态" align="center">
              <template #default="scope">
                <div class="hidden-switch"
                     @click="beforeChange(scope.row)"
                ></div>
                <el-switch
                    :inactive-value='0'
                    :active-value='1'
                    inline-prompt
                    active-color="#1890ff"
                    inactive-color="#c0c0c0"
                    v-model='scope.row.status'
                />
              </template>
            </el-table-column>
          </el-table>

            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
                :pager-count="5" :page-sizes="[15, 30, 45]" v-model:current-page="tableData.param.current" background
                v-model:page-size="tableData.param.size" layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.total">
            </el-pagination>
        </el-card>
        <AddRole ref="addRoleRef" />
        <EditRole ref="editRoleRef" />
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import AddRole from './component/addRole.vue';
import EditRole from './component/editRole.vue';
import { regionGet, schoolList, uploadFile,Enable} from '../../api/school/index'
import { formatDate } from '/@/utils/formatTime';
export default {
    name: 'studentIndex',
    components: { AddRole, EditRole },
    setup() {
        const addRoleRef = ref();
        const editRoleRef = ref();
        const state: any = reactive({
            tableData: {
                data: [],
                total: 0,
                loading: false,
                param: {
                    current: 1,
                    size: 15,
                    name: '',
                    region: '',
                    xlcc: ''
                },
            },
            regionList: []
        });
        // 初始化表格数据
        const initTableData = async () => {
            let res = await schoolList(state.tableData.param)
            res.data.records.forEach((item:any)=>{
                item.applyTime =  formatDate(
                    new Date(item.applyTime),
                    'YYYY-mm-dd HH:MM'
                )
            })
            state.tableData.data = res.data.records;
            state.tableData.total = res.data.total;
        };
        // 打开新增角色弹窗
        const onOpenAddRole = () => {
            addRoleRef.value.openDialog();
        };
        const beforeUpload = (file:any)=>{
            console.log(file);

            let fd = new FormData()
            fd.append('file', file)
            // fd.append('id', file.uid)
            // fd.append('name', file.name)
            // fd.append('type', file.type)
            // fd.append('size', file.size)
            // fd.append('lastModifiedDate', file.lastModifiedDate)
            uploadFile(fd).then(res => {
                console.log(res);
                if(res.code === 200){
                    ElMessage.success('上传成功');
                    initTableData();
                }else{

                }
            })
        }
      const beforeChange =(row:any)=>{
        ElMessageBox.confirm(`此操作将开启当前学校：“${row.name}”，是否继续?`, '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then((action)=>{
          if (action == "confirm") {
            const params ={
              id :row.id,
            }
            Enable(params).then((res:any)=>{
              row.status = row.status == 0? 1: 0;
              ElMessage({
                type: 'success',
                message: '更改状态成功',
              })
            }).catch(()=>{
              ElMessage({
                type: 'error',
                message: '更改状态失败',
              })
            })
          }
        })
      }
        const onHandleSizeChange = (val: number) => {
            state.tableData.param.size = val;
            initTableData()
        };
        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.tableData.param.current = val;
            initTableData()
        };

        //获取地区列表
        const initRegion = () => {
            regionGet({}).then((res) => {
                console.log(res)
                state.regionList = res.data
            })
        }
        //查询
        const search = () => {
            state.tableData.param.current = 1;
            initTableData()
        }
        //重置
        const Reset = () => {
            state.tableData.param.current = 1;
            state.tableData.param.size = 15;
            state.tableData.param.name = '';
            state.tableData.param.region = '';
            state.tableData.param.xlcc = '';
            initTableData()
        }
        // 页面加载时
        onMounted(() => {

            initTableData();
            initRegion()
        });
        return {
            addRoleRef,
            editRoleRef,
            onOpenAddRole,
            beforeChange,
            beforeUpload,
            onHandleSizeChange,
            onHandleCurrentChange,
            search,
            Reset,
            ...toRefs(state),
        };
    },
};
</script>

<style lang="scss">
.system-user-search-school-index {
    display: flex;
    flex-direction: column;
    .btn_bgc {
        background: #D84436;
        border: none;

    }
}
.system-role-container-school-index {
  .el-card__header {
    height: auto!important;
    min-height: 45px!important;
  }
  .cell {
    position: relative;
    .hidden-switch {
      width: 50px;
      height: 30px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      z-index: 20;
      background: transparent;
      cursor: pointer;
    }
  }
}
</style>
